<template>
  <el-checkbox label="房屋调查" @change="houseHandle" value="0" style="color: #fff" />
  <el-checkbox label="灾情急报" @change="disasterHandle" value="1" style="color: #fff" />
  <el-checkbox label="地震灾害调查" @change="earthquakeHandle" value="2" style="color: #fff" />
  <el-checkbox label="地震烈度圈" @change="IntensityHandle" value="3" style="color: #fff" />

  <teleport to="body">
    <div ref="popup" class="popup">
      <autoDialog
        :isuseDraggable="false"
        size="small"
        :title="poiname"
        :isFixed="false"
        @close="
          () => {
            hidePopup()
          }
        "
      >
        <div class="box" v-if="markType === 0">
          <el-carousel
            height="180px"
            style="margin-bottom: 15px"
            v-if="houseAllInfo.allFiles?.length > 0"
          >
            <el-carousel-item v-for="(item, index) in houseAllInfo.pictureUrl" :key="index">
              <div class="carousImg" @click="toViewImg(item)" style="width: 100%; height: 100%">
                <img :src="item" alt="" style="width: 100%; height: 100%" />
              </div>
            </el-carousel-item>

            <el-carousel-item v-for="(item, index) in houseAllInfo.audioUrl" :key="index">
              <div class="carousAudio" @click="playAudio(item)" style="width: 100%; height: 100%">
                <audio controls width="100%" height="100%">
                  <source :src="item" type="audio/mpeg" />
                </audio>
              </div>
            </el-carousel-item>

            <el-carousel-item v-for="(item, index) in houseAllInfo.videoUrl" :key="item">
              <div class="carousVideo" @click="toViewVideo(item)" style="width: 100%; height: 100%">
                <video controls width="100%" height="100%" muted>
                  <source :src="item" type="video/mp4" />
                </video>
              </div>
            </el-carousel-item>
          </el-carousel>
          <div class="list">
            <span class="header"> {{ houseAllInfo.collectAddr }}</span>
          </div>
          <div class="list">
            <span class="title">烈度拟定:</span>
            <span class="desc">{{ houseAllInfo.intensityLevel }}</span>
          </div>
          <div class="list">
            <span class="title">灾情描述:</span>
            <span class="desc">{{ houseAllInfo.disasterDesc }}</span>
          </div>
          <div class="list">
            <span class="title">调查时间:</span>
            <span class="desc">{{ houseAllInfo.createTime }}</span>
          </div>
        </div>
        <div class="box" v-if="markType === 1">
          <el-carousel
            height="180px"
            style="margin-bottom: 15px"
            v-if="houseSignInfo.allFiles?.length > 0"
          >
            <el-carousel-item v-for="(item, index) in houseSignInfo.pictureUrl" :key="index">
              <div class="carousImg" @click="toViewImg(item)" style="width: 100%; height: 100%">
                <img :src="item" alt="" style="width: 100%; height: 100%" />
              </div>
            </el-carousel-item>

            <el-carousel-item v-for="(item, index) in houseSignInfo.audioUrl" :key="index">
              <div class="carousAudio" @click="playAudio(item)" style="width: 100%; height: 100%">
                <audio controls width="100%" height="100%">
                  <source :src="item" type="audio/mpeg" />
                </audio>
              </div>
            </el-carousel-item>

            <el-carousel-item v-for="(item, index) in houseSignInfo.videoUrl" :key="item">
              <div class="carousVideo" @click="toViewVideo(item)" style="width: 100%; height: 100%">
                <video controls width="100%" height="100%" muted>
                  <source :src="item" type="video/mp4" />
                </video>
              </div>
            </el-carousel-item>
          </el-carousel>
          <div class="list">
            <span class="header"> {{ houseSignInfo.collectAddr }}</span>
          </div>
          <div class="list">
            <span class="title">结构类型:</span>
            <span class="desc">{{ houseSignInfo.structureType }}</span>
          </div>
          <div class="list">
            <span class="title">破坏类型:</span>
            <span class="desc">{{ houseSignInfo.destructionType }}</span>
          </div>
          <div class="list">
            <span class="title">建筑面积:</span>
            <span class="desc">{{ houseSignInfo.floorageValue }}</span>
          </div>
          <div class="list">
            <span class="title">灾情描述:</span>
            <span class="desc">{{ houseSignInfo.disasterDesc }}</span>
          </div>
          <div class="list">
            <span class="title">调查时间:</span>
            <span class="desc">{{ houseSignInfo.createTime }}</span>
          </div>
        </div>
        <div class="box" v-if="markType === 2">
          <el-carousel
            height="180px"
            style="margin-bottom: 15px"
            v-if="disasterInfo.allFiles?.length > 0"
          >
            <el-carousel-item v-for="(item, index) in disasterInfo.pictureUrl" :key="index">
              <div class="carousImg" @click="toViewImg(item)" style="width: 100%; height: 100%">
                <img :src="item" alt="" style="width: 100%; height: 100%" />
              </div>
            </el-carousel-item>

            <el-carousel-item v-for="(item, index) in disasterInfo.audioUrl" :key="index">
              <div class="carousAudio" @click="playAudio(item)" style="width: 100%; height: 100%">
                <audio controls width="100%" height="100%">
                  <source :src="item" type="audio/mpeg" />
                </audio>
              </div>
            </el-carousel-item>

            <el-carousel-item v-for="(item, index) in disasterInfo.videoUrl" :key="item">
              <div class="carousVideo" @click="toViewVideo(item)" style="width: 100%; height: 100%">
                <video controls width="100%" height="100%" muted>
                  <source :src="item" type="video/mp4" />
                </video>
              </div>
            </el-carousel-item>
          </el-carousel>
          <div class="list">
            <span class="header"> {{ disasterInfo.collectAddr }}</span>
          </div>
          <div class="list">
            <span class="title">快速调查类型:</span>
            <span class="desc">{{ disasterInfo.text }}</span>
          </div>

          <div class="list">
            <span class="title">灾情描述:</span>
            <span class="desc">{{ disasterInfo.disasterDesc }}</span>
          </div>
          <div class="list">
            <span class="title">调查时间:</span>
            <span class="desc">{{ disasterInfo.createTime }}</span>
          </div>
        </div>
        <div class="box" v-if="markType === 3">
          <div class="list-content scroll-b">
            <el-carousel
              height="180px"
              style="margin-bottom: 15px"
              v-if="earthQuakeInfo.allFiles?.length > 0"
            >
              <el-carousel-item v-for="(item, index) in earthQuakeInfo.pictureUrl" :key="index">
                <div class="carousImg" @click="toViewImg(item)" style="width: 100%; height: 100%">
                  <img :src="item" alt="" style="width: 100%; height: 100%" />
                </div>
              </el-carousel-item>

              <el-carousel-item v-for="(item, index) in earthQuakeInfo.bigpictureUrls" :key="index">
                <div class="carousImg" @click="toViewImg(item)" style="width: 100%; height: 100%">
                  <img :src="item" alt="" style="width: 100%; height: 100%" />
                </div>
              </el-carousel-item>

              <el-carousel-item v-for="(item, index) in earthQuakeInfo.audioUrl" :key="index">
                <div class="carousAudio" @click="playAudio(item)" style="width: 100%; height: 100%">
                  <audio controls width="100%" height="100%">
                    <source :src="item" type="audio/mpeg" />
                  </audio>
                </div>
              </el-carousel-item>

              <el-carousel-item v-for="(item, index) in earthQuakeInfo.videoUrl" :key="item">
                <div
                  class="carousVideo"
                  @click="toViewVideo(item)"
                  style="width: 100%; height: 100%"
                >
                  <video controls width="100%" height="100%" muted>
                    <source :src="item" type="video/mp4" />
                  </video>
                </div>
              </el-carousel-item>

              <el-carousel-item v-for="(item, index) in earthQuakeInfo.bigvideoUrls" :key="item">
                <div
                  class="carousVideo"
                  @click="toViewVideo(item)"
                  style="width: 100%; height: 100%"
                >
                  <video controls width="100%" height="100%" muted>
                    <source :src="item" type="video/mp4" />
                  </video>
                </div>
              </el-carousel-item>
            </el-carousel>
            <div class="list">
              <span class="header"> {{ earthQuakeInfo.collectAddr }}</span>
            </div>

            <div class="list">
              <span class="title" style="width: 33.33%"
                >烈度拟定:<span class="desc">{{ earthQuakeInfo.intensityLevel }}</span></span
              >
              <span class="title" style="width: 33.33%"
                >调查点户数: <span class="desc">{{ earthQuakeInfo.pointFamilyNum }}</span></span
              >
              <span class="title" style="width: 33.33%"
                >户均房屋面积:
                <span class="desc">{{ earthQuakeInfo.pointAverageArea || 0 }}</span></span
              >
            </div>

            <div class="list" style="justify-content: space-between">
              <span class="title" style="width: 33.33%"
                >调查点人口:<span class="desc">{{ earthQuakeInfo.pointPeopleNum }}</span></span
              >
              <span class="title" style="width: 33.33%"
                >死亡人数:<span class="desc">{{ earthQuakeInfo.peopleNumDeath }}</span></span
              >
              <span class="title" style="width: 33.33%"
                >失踪人数: <span class="desc">{{ earthQuakeInfo.peopleNumMiss }}</span></span
              >
            </div>

            <div class="list" style="justify-content: space-between">
              <span class="title" style="width: 33.33%"
                >重伤人数: <span class="desc">{{ earthQuakeInfo.peopleNumHeavyhurt }}</span></span
              >
              <span class="title" style="width: 33.33%"
                >轻伤人数: <span class="desc">{{ earthQuakeInfo.peopleNumLighthurt }}</span></span
              >
              <span class="title" style="width: 33.33%"
                >人员震感: <span class="desc">{{ earthQuakeInfo.macroPeopleSense }}</span></span
              >
            </div>

            <div class="list">
              <span class="title">地形地貌: </span>
              <span class="desc">{{ earthQuakeInfo.macroTerrain }}</span>
            </div>
            <div class="list">
              <span class="title">器皿反应情况:</span>
              <span class="desc">{{ earthQuakeInfo.macroUtensilsReaction }}</span>
            </div>
            <div class="list">
              <span class="title">宏观异常现象:</span>
              <span class="desc">{{ earthQuakeInfo.macroAbnormalShow }}</span>
            </div>
            <div class="list">
              <span class="title">宏观描述:</span>
              <span class="desc">{{ earthQuakeInfo.macroDesc }}</span>
            </div>
            <div class="list">
              <span class="title">地质灾害:</span>
              <span class="desc">{{ earthQuakeInfo.groundDamageGround }}</span>
            </div>
            <div class="list">
              <span class="title">建筑物震害特征描述:</span>
              <span class="desc">{{ earthQuakeInfo.buildDamageDesc }}</span>
            </div>
            <div class="list">
              <span class="title">灾情描述:</span>
              <span class="desc">{{ earthQuakeInfo.disasterDesc }}</span>
            </div>
            <div class="list">
              <span class="title">调查时间:</span>
              <span class="desc">{{ earthQuakeInfo.createTime }}</span>
            </div>
          </div>
        </div>
      </autoDialog>
    </div>
  </teleport>

  <teleport to="body">
    <div class="image-video-container" v-if="overlay" @click="closeOverlay">
      <img :src="imageUrl" v-if="imageUrl" alt="Sample Image" />
      <video v-if="videoUrl" :src="videoUrl" controls></video>
      <audio controls width="100%" v-if="audioUrl" height="100%">
        <source :src="audioUrl" type="audio/mpeg" />
      </audio>
    </div>
  </teleport>
</template>

<script setup>
import { ref } from 'vue'
import * as Surveys from '../../../../api/otherApi/siteSurveys'
import { createPoint, createPopup } from '../../../../api/gis3d/maputils'
import { useMapStoreStore } from '../../../../stores/index'
import { forEach } from 'lodash-es'
// Surveys.oneEarthQuake()
const obj = {}
const popup = ref(null)

const poiname = ref('')
const markType = ref(0) // 0123 房屋调查详情展  灾情急报详情展 地震灾害调查详情展示
const store = useMapStoreStore()
const activeIndex = ref(-1)
let eventCode = ''

const getAllEarthQuake = () => {
  var time = store.earthquakeInfo.earthquakeTime
  Surveys.getBatchEvent(time).then((e) => {
    let data = e.data.data
    filterEarthQuakeInfo(data)
  })
}
getAllEarthQuake()
const filterEarthQuakeInfo = (data) => {
  var lon = store.earthquakeInfo.longitude
  var lat = store.earthquakeInfo.latitude
  var time = store.earthquakeInfo.earthquakeTime
  var earthquakeMagnitude = store.earthquakeInfo.earthquakeMagnitude

  if (data && data.length > 0) {
    for (const item of data) {
      if (
        item.longitude == lon &&
        item.latitude == lat &&
        item.eventTime == time &&
        earthquakeMagnitude == item.magnitude
      ) {
        eventCode = item.eventCode
      }
    }
  }
}

let houseData = ref([])
const houseHandle = (e) => {
  if (e) {
    Surveys.getCollectHouse(eventCode).then((e) => {
      if (e.data.code === '2000') {
        const data = e.data.data
        if (data && data.length > 0) {
          addHouseGroupLabels(data)
        }
      }else{
        ElMessage({
        message:"当前地震未匹配到现场调查地震" +e.data.code,
        type:"warning"
      })
      }
    }).catch(e=>{
      ElMessage({
        message:e,
        type:"error"
      })
    })
    Surveys.getCollectSingleHouse(eventCode).then((e) => {
      if (e.data.code === '2000') {
        const data = e.data.data
        if (data && data.length > 0) {
          addHouseSingleLabels(data)
        }
      }else{
        ElMessage({
        message:"当前地震未匹配到现场调查地震" +e.data.code,
        type:"warning"
      })
      }
    }).catch(e=>{
      ElMessage({
        message:e,
        type:"error"
      })
    })
    return
  }

  for (const element of houseData.value) {
    viewer.entities.remove(element)
  }
  for (const element of houseSign.value) {
    viewer.entities.remove(element)
  }
  houseSign.value = []
  houseData.value = []
}

// 创建房屋群体调查数据的图标和文字标注
function addHouseGroupLabels(housedata) {
  housedata.forEach((data) => {
    const intensity = data.intensityLevel
    data.activeIndex = 0
    var iconPath = ''
    if (intensity <= 6) {
      iconPath = '/static/assets/3d/1.png' //
    } else if (intensity <= 7) {
      iconPath = '/static/assets/3d/2.png' //
    } else if (intensity <= 8) {
      iconPath = '/static/assets/3d/3.png' //
    } else if (intensity <= 9) {
      iconPath = '/static/assets/3d/4.png' //
    } else if (intensity <= 10) {
      iconPath = '/static/assets/3d/5.png' //
    } else {
      iconPath = '/static/assets/3d/6.png' //
    }
    const entity = viewer.entities.add({
      _edata: data,
      type: 'houseall-point',
      position: Cesium.Cartesian3.fromDegrees(Number(data.longitude), Number(data.latitude)),
      billboard: {
        image: iconPath, // 替换为实际的图标路径
        width: 40, // 设置宽度为 50 像素
        height: 40 // 设置高度为 50 像素
      },
      label: {
        text: intensity + '度',
        font: '18px Arial',
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 2,
        outlineColor: Cesium.Color.BLACK,
        fillColor: Cesium.Color.WHITE,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        eyeOffset: new Cesium.Cartesian3(0, 0, -10),
        pixelOffset: new Cesium.Cartesian2(0, -33) // 调整文字相对图标的位置
      }
    })
    houseData.value.push(entity)
  })
}
/////  addHouseGroupLabels  start//////
var houseAllInfo = ref({})
const getHouseallData = (data) => {
  houseAllInfo.value.collectAddr = data.collectAddr
  houseAllInfo.value.intensityLevel = data.intensityLevel
  houseAllInfo.value.disasterDesc = data.disasterDesc || '暂无描述'
  houseAllInfo.value.createTime = data.createTime
  const videoUrls = data.videoUrl ? data.videoUrl.split(';') : []
  const audioUrls = data.audioUrl ? data.audioUrl.split(';') : []
  const pictureUrls = data.pictureUrl ? data.pictureUrl.split(';') : []
  houseAllInfo.value.videoUrl = videoUrls
  houseAllInfo.value.audioUrl = audioUrls
  houseAllInfo.value.pictureUrl = pictureUrls
  houseAllInfo.value.allFiles = [
    ...pictureUrls.filter((url) => url.trim() !== ''),
    ...videoUrls.filter((url) => url.trim() !== ''),
    ...audioUrls.filter((url) => url.trim() !== '')
  ]
  poiname.value = data.detailName
}
const clearInput = () => {
  closePopup && closePopup()
  hidePopup = null
}

const isActiveNumber = (data) => {
  var n = data.activeIndex
  switch (n) {
    case 0:
      getHouseallData(data)
      markType.value = 0
      break
    case 1:
      getHouseSignData(data)
      markType.value = 1
      break
    case 2:
      getDisasterData(data)
      markType.value = 2
      break
    case 3:
      getEarthQuakeData(data)
      markType.value = 3
      break
  }
  return
}
/////  addHouseGroupLabels  end//////

// 创建房屋单体调查数据的图标和文字标注
const houseSignInfo = ref({})
let houseSign = ref([])
function addHouseSingleLabels(signdata) {
  signdata.forEach((data) => {
    let text = ''
    let color = ''
    let iconPath = ''
    data.activeIndex = 1
    switch (data.destructionType) {
      case '1':
        text = '毁'
        color = Cesium.Color.RED
        iconPath = '/static/assets/3d/hui.png'
        break
      case '2':
        text = '重'
        color = Cesium.Color.ORANGE
        iconPath = '/static/assets/3d/zhong.png' // 替换为重损坏状态图标路径
        break
      case '3':
        text = '中'
        color = Cesium.Color.YELLOW
        iconPath = '/static/assets/3d/zhong1.png' // 替换为中损坏状态图标路径
        break
      case '4':
        text = '轻'
        color = Cesium.Color.LIGHTYELLOW
        iconPath = '/static/assets/3d/qian.png' // 替换为轻损坏状态图标路径
        break
      case '5':
        text = '好'
        color = Cesium.Color.GREEN
        iconPath = '/static/assets/3d/hao.png' // 替换为完好状态图标路径
        break
    }

    switch (data.structureType) {
      case '1':
        data.structureType = '钢混'
        break
      case '2':
        data.structureType = '设防砖混'
        break
      case '3':
        data.structureType = '砖混'
        break
      case '4':
        data.structureType = '砖木'
        break
      case '5':
        data.structureType = '土木'
        break
      case '6':
        data.structureType = '其他'
        break
      default:
        data.structureType = '其他'
        break
    }

    switch (data.destructionType) {
      case '1':
        data.destructionType = '毁坏'
        break
      case '2':
        data.destructionType = '严重'
        break
      case '3':
        data.destructionType = '中等'
        break
      case '4':
        data.destructionType = '轻微'
        break
      case '5':
        data.destructionType = '完好'
        break
      default:
        data.destructionType = '暂无数据'
        break
    }
    const entity = viewer.entities.add({
      _edata: data,
      type: 'houseall-point',
      position: Cesium.Cartesian3.fromDegrees(Number(data.longitude), Number(data.latitude)),
      billboard: {
        image: iconPath,
        width: 48, // 设置宽度为 50 像素
        height: 48 // 设置高度为 50 像素
      },

      label: {
        text,
        font: '18px Arial',
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 2,
        outlineColor: Cesium.Color.BLACK,
        fillColor: Cesium.Color.WHITE,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        eyeOffset: new Cesium.Cartesian3(0, 0, -10),
        pixelOffset: new Cesium.Cartesian2(0, 3) // 调整文字相对图标的位置
      }
    })
    houseSign.value.push(entity)
  })
}

const getHouseSignData = (data) => {
  houseSignInfo.value.collectAddr = data.collectAddr
  houseSignInfo.value.disasterDesc = data.disasterDesc || '暂无描述'
  houseSignInfo.value.createTime = data.createTime
  houseSignInfo.value.floorageValue = data.floorageValue || '暂无数据'
  houseSignInfo.value.structureType = data.structureType
  houseSignInfo.value.destructionType = data.destructionType

  const videoUrls = data.videoUrl ? data.videoUrl.split(';') : []
  const audioUrls = data.audioUrl ? data.audioUrl.split(';') : []
  const pictureUrls = data.pictureUrl ? data.pictureUrl.split(';') : []
  houseSignInfo.value.videoUrl = videoUrls
  houseSignInfo.value.audioUrl = audioUrls
  houseSignInfo.value.pictureUrl = pictureUrls
  houseSignInfo.value.allFiles = [
    ...pictureUrls.filter((url) => url.trim() !== ''),
    ...videoUrls.filter((url) => url.trim() !== ''),
    ...audioUrls.filter((url) => url.trim() !== '')
  ]
  poiname.value = data.detailName
}

let disasterData = ref([])
const disasterHandle = (e) => {
  if (e) {
    Surveys.getCollectFast(eventCode).then((e) => {
      if (e.data.code === '2000') {
        const data = e.data.data
        const pointArr = []
        if (data && data.length > 0) {
          markType.value = 2
          addDisasterData(data)
        }
      }else{
        ElMessage({
        message:"当前地震未匹配到现场调查地震" +e.data.code,
        type:"warning"
      })
      }
    }).catch(e=>{
      ElMessage({
        message:e,
        type:"error"
      })
    })
    return
  }

  if (disasterData.value.length > 0) {
    for (const element of disasterData.value) {
      viewer.entities.remove(element)
    }
    disasterData.value = []
  }
}

const addDisasterData = (e) => {
  e.forEach((data) => {
    const intensity = data.intensityLevel
    var iconPath = ''
    var text = ''
    data.activeIndex = 2
    var nowtype = data.markType.split(';');
    var sindex = 0;
    for (const item of nowtype) {
       if(sindex >= 1){
        text += ',';
       }
        switch (item) {
      case '1':
        text += '伤亡'
        iconPath = '/static/assets/3d/s1.png'
        break
      case '2':
        text += '埋压/被困'
        iconPath = '/static/assets/3d/s2.png' // 替换为重损坏状态图标路径
        break
      case '3':
        text += '房屋倒塌'
        iconPath = '/static/assets/3d/s3.png' // 替换为中损坏状态图标路径
        break
      case '4':
        text += '崩塌'
        iconPath = '/static/assets/3d/s4.png' // 替换为轻损坏状态图标路径
        break
      case '5':
        text += '滑坡'
        iconPath = '/static/assets/3d/s5.png' // 替换为完好状态图标路径
        break
      case '6':
        text += '道路拥堵/道路中断'
        iconPath = '/static/assets/3d/s6.png' // 替换为完好状态图标路径
        break
      case '7':
        text += '火灾'
        iconPath = '/static/assets/3d/s7.png' // 替换为完好状态图标路径
        break
      case '8':
        text += '危险品泄露'
        iconPath = '/static/assets/3d/s8.png' // 替换为完好状态图标路径
        break
      case '9':
        text += '其他'
        iconPath = '/static/assets/3d/s9.png' // 替换为完好状态图标路径
        break
      default:
        text += '其他'
        iconPath = '/static/assets/3d/s9.png' // 替换为完好状态图标路径
        break
    }
    sindex++;
    }

    data.text = text
    // if (intensity < 3) {
    //   iconPath = '/static/assets/3d/1.png' //
    // } else if (intensity < 4) {
    //   iconPath = '/static/assets/3d/2.png' //
    // } else if (intensity < 5) {
    //   iconPath = '/static/assets/3d/3.png' //
    // } else {
    //   iconPath = '/static/assets/3d/4.png' //
    // }
    const entity = viewer.entities.add({
      _edata: data,
      type: 'houseall-point',
      position: Cesium.Cartesian3.fromDegrees(Number(data.longitude), Number(data.latitude)),
      billboard: {
        image: iconPath, // 替换为实际的图标路径
        width: 40, // 设置宽度为 50 像素
        height: 40 // 设置高度为 50 像素
      },
      label: {
        text: text,
        font: '20px sans-serif',
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 2,
        outlineColor: Cesium.Color.BLACK,
        fillColor: Cesium.Color.WHITE,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, -30) // 调整文字相对图标的位置
      }
    })
    disasterData.value.push(entity)
  })
}

const disasterInfo = ref({})
const getDisasterData = (data) => {
  disasterInfo.value.collectAddr = data.collectAddr
  // disasterInfo.value.intensityLevel = data.intensityLevel
  disasterInfo.value.disasterDesc = data.disasterDesc || '暂无描述'
  disasterInfo.value.markType = data.markType
  disasterInfo.value.text = data.text
  disasterInfo.value.createTime = data.createTime
  const videoUrls = data.videoUrl ? data.videoUrl.split(';') : []
  const audioUrls = data.audioUrl ? data.audioUrl.split(';') : []
  const pictureUrls = data.pictureUrl ? data.pictureUrl.split(';') : []
  disasterInfo.value.videoUrl = videoUrls
  disasterInfo.value.audioUrl = audioUrls
  disasterInfo.value.pictureUrl = pictureUrls
  disasterInfo.value.allFiles = [
    ...pictureUrls.filter((url) => url.trim() !== ''),
    ...videoUrls.filter((url) => url.trim() !== ''),
    ...audioUrls.filter((url) => url.trim() !== '')
  ]
  poiname.value = data.detailName
}

let earthQuakeData = ref([])
const earthquakeHandle = (e) => {
  if (e) {
    Surveys.getCollectHouse(eventCode).then((e) => {
      if (e.data.code === '2000') {
        const data = e.data.data
        const pointArr = []
        if (data && data.length > 0) {
          addEarthQuake(data)
        }
      }else{
        ElMessage({
        message:"当前地震未匹配到现场调查地震" +e.data.code,
        type:"warning"
      })
      }
    })
    return
  }

  if (earthQuakeData.value && earthQuakeData.value.length > 0) {
    for (const element of earthQuakeData.value) {
      viewer.entities.remove(element)
    }
    earthQuakeData.value = []
  }
}

const addEarthQuake = (data) => {
  data.forEach((data) => {
    let intensity = data.intensityLevel
    var iconPath = ''
    var text = ''
    data.activeIndex = 3
    if (intensity <= 6) {
      iconPath = '/static/assets/3d/g6.png' //
    } else if (intensity <= 7) {
      iconPath = '/static/assets/3d/g7.png' //
    } else if (intensity <= 8) {
      iconPath = '/static/assets/3d/g8.png' //
    } else if (intensity <= 9) {
      iconPath = '/static/assets/3d/g9.png' //
    } else if (intensity <= 10) {
      iconPath = '/static/assets/3d/g10.png' //
    } else {
      iconPath = '/static/assets/3d/g11.png' //
    }

    const entity = viewer.entities.add({
      _edata: data,
      type: 'houseall-point',
      position: Cesium.Cartesian3.fromDegrees(
        Number(data.longitude) + 0.001,
        Number(data.latitude)
      ),
      billboard: {
        image: iconPath, // 替换为实际的图标路径
        width: 40, // 设置宽度为 50 像素
        height: 40 // 设置高度为 50 像素
      },
      label: {
        text: intensity + '度',
        font: '20px sans-serif',
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 2,
        outlineColor: Cesium.Color.BLACK,
        fillColor: Cesium.Color.WHITE,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, -30) // 调整文字相对图标的位置
      }
    })
    earthQuakeData.value.push(entity)
  })
}

const earthQuakeInfo = ref({})
const getEarthQuakeData = (data) => {
  switch (data.macroTerrain) {
    case '1':
      data.macroTerrain = '平原'

      break
    case '2':
      data.macroTerrain = '丘陵'

      break
    case '3':
      data.macroTerrain = '山地'

      break
    case '4':
      data.macroTerrain = '高原'

      break
    case '5':
      data.macroTerrain = '盆地'

      break

    default:
      break
  }

  switch (data.macroPeopleSense) {
    case '1':
      data.macroPeopleSense = '无震感'
      break
    case '2':
      data.macroPeopleSense = '少数人有感'
      break
    case '3':
      data.macroPeopleSense = '多数人有感'
      break
    case '4':
      data.macroPeopleSense = '震感强烈'
      break
    case '5':
      data.macroPeopleSense = '惊慌外逃'
      break
    case '6':
      data.macroPeopleSense = '其他'
      break

    default:
      data.macroPeopleSense = '其他'
      break
  }

  switch (data.macroUtensilsReaction) {
    case '1':
      data.macroUtensilsReaction = '悬挂物轻微摆动'
      break
    case '2':
      data.macroUtensilsReaction = '悬挂物摆动，不稳器皿作响'
      break
    case '3':
      data.macroUtensilsReaction = '器皿翻落'
      break
    case '4':
      data.macroUtensilsReaction = '其他'
      break
    default:
      data.macroUtensilsReaction = '其他'
      break
  }

  var macroAbnormalShowStr = data.macroAbnormalShow.split(';')

  var nowMacroAbnormalShowStr = ''
  macroAbnormalShowStr.forEach((item, index) => {
    if (index > 0) {
      nowMacroAbnormalShowStr += ','
    }
    switch (item) {
      case '1':
        nowMacroAbnormalShowStr += '地下水异常'
        break
      case '2':
        nowMacroAbnormalShowStr += '生物异常'
        break
      case '3':
        nowMacroAbnormalShowStr += '气象异常'
        break
      case '4':
        nowMacroAbnormalShowStr += '地声异常'
        break
      case '5':
        nowMacroAbnormalShowStr += '地光异常'
        break
      case '6':
        nowMacroAbnormalShowStr += '地气异常'
        break
      case '7':
        nowMacroAbnormalShowStr += '地动异常'
      case '8':
        nowMacroAbnormalShowStr += '地鼓异常'
        break
      case '9':
        nowMacroAbnormalShowStr += '地磁异常'
        break
      case '10':
        nowMacroAbnormalShowStr += '无异常'
        break
    }
  })
  nowMacroAbnormalShowStr = nowMacroAbnormalShowStr || '暂无数据'
  var groundDamageGroundStr = data.groundDamageGround.split(';')
  var newGroundDamageGroundStr = ''
  groundDamageGroundStr.forEach((item, index) => {
    if (index > 0) {
      newGroundDamageGroundStr += ','
    }
    switch (item) {
      case '1':
        newGroundDamageGroundStr += '地表破裂'
        break
      case '2':
        newGroundDamageGroundStr += '地裂缝'
        break
      case '3':
        newGroundDamageGroundStr += '崩塌'
        break
      case '4':
        newGroundDamageGroundStr += '滑坡'
        break
      case '5':
        newGroundDamageGroundStr += '泥石流'
        break
      case '6':
        newGroundDamageGroundStr += '砂土液化'
        break
      case '7':
        newGroundDamageGroundStr += '软土震陷'
      case '8':
        newGroundDamageGroundStr += '其他'
    }
  })

  earthQuakeInfo.value.collectAddr = data.collectAddr //行政区
  earthQuakeInfo.value.intensityLevel = data.intensityLevel //烈度拟定
  earthQuakeInfo.value.disasterDesc = data.disasterDesc || '暂无描述' //灾情描述
  earthQuakeInfo.value.pointFamilyNum = data.pointFamilyNum //调查点户数；
  earthQuakeInfo.value.pointAverageArea = data.pointAverageArea //户均房屋面基
  earthQuakeInfo.value.pointPeopleNum = data.pointPeopleNum //调查点人口
  earthQuakeInfo.value.peopleNumDeath = data.peopleNumDeath //死亡人数
  earthQuakeInfo.value.peopleNumMiss = data.peopleNumMiss //失踪人数
  earthQuakeInfo.value.peopleNumHeavyhurt = data.peopleNumHeavyhurt //重伤人数
  earthQuakeInfo.value.peopleNumLighthurt = data.peopleNumLighthurt //轻伤人数
  earthQuakeInfo.value.macroTerrain = data.macroTerrain //地形地貌
  earthQuakeInfo.value.macroPeopleSense = data.macroPeopleSense //人员震感
  earthQuakeInfo.value.macroUtensilsReaction = data.macroUtensilsReaction //器皿反应情况
  earthQuakeInfo.value.macroAbnormalShow = nowMacroAbnormalShowStr //宏观异常现象
  earthQuakeInfo.value.macroDesc = data.macroDesc || '暂无描述' //宏观描述
  earthQuakeInfo.value.groundDamageGround = newGroundDamageGroundStr || '暂无描述' //地质灾害
  earthQuakeInfo.value.buildDamageDesc = data.buildDamageDesc || '暂无描述' //建筑物震害特征描述
  earthQuakeInfo.value.createTime = data.createTime //时间

  const bigpictureUrls = data.macroPhotoUrl ? data.macroPhotoUrl.split(';') : [] //图片
  const bigvideoUrls = data.macroAudioVideoUrl ? data.macroAudioVideoUrl.split(';') : [] //图片
  const videoUrls = data.videoUrl ? data.videoUrl.split(';') : []
  const audioUrls = data.audioUrl ? data.audioUrl.split(';') : []
  const pictureUrls = data.pictureUrl ? data.pictureUrl.split(';') : []
  earthQuakeInfo.value.videoUrl = videoUrls
  earthQuakeInfo.value.audioUrl = audioUrls
  earthQuakeInfo.value.pictureUrl = pictureUrls

  earthQuakeInfo.value.bigpictureUrls = bigpictureUrls
  earthQuakeInfo.value.bigvideoUrls = bigvideoUrls

  earthQuakeInfo.value.allFiles = [
    ...pictureUrls.filter((url) => url.trim() !== ''),
    ...videoUrls.filter((url) => url.trim() !== ''),
    ...audioUrls.filter((url) => url.trim() !== '')
  ]
  poiname.value = data.detailName
}

const IntensityHandle = (e) => {
  if (e) {
    Surveys.getIntensityCircle(eventCode).then((e) => {
      if (e.data.size <= 0) {
        ElMessage({
          message: '该地震事件下未返回数据',
          type: 'warning'
        })
        return
      }
      // const url = window.URL.createObjectURL(e.data);
      // const a = document.createElement('a');
      // a.href = url;
      // a.download = "1.geojson";
      // document.body.appendChild(a);
      // a.click();
      // document.body.removeChild(a);
      // window.URL.revokeObjectURL(url);
      const blob = new Blob([e.data], { type: 'application/geo+json' })
      const reader = new FileReader()
      reader.onload = function () {
        const geojsonData = JSON.parse(reader.result)
        const dataSource = Cesium.GeoJsonDataSource.load(geojsonData, {
          fill: Cesium.Color.RED.withAlpha(0.5),
          strokeWidth: 2
        }).then((e) => {
          viewer.dataSources.add(e)
          viewer.zoomTo(e)
          obj['intensity'] = e
        })
      }
      reader.readAsText(blob)
    })
    return
  }
  if (obj['intensity']) {
    viewer.dataSources.remove(obj['intensity'])
    obj['intensity'] = null
  }
}

const isFullscreen = ref(false)
const imageUrl = ref('')
const videoUrl = ref('')
const isVideoVisible = ref(false)
const overlay = ref(false)
const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value
  isVideoVisible.value = false
}

const showVideo = () => {
  isVideoVisible.value = true
}
const toViewImg = (e) => {
  overlay.value = true
  imageUrl.value = e
}
const toViewVideo = (e) => {
  overlay.value = true
  videoUrl.value = e
}
const closeOverlay = () => {
  overlay.value = false
  videoUrl.value = ''
  imageUrl.value = ''
}

let closePopup = null
let hidePopup = null

watch(
  () => [
    houseData.value.length,
    houseSign.value.length,
    disasterData.value.length,
    earthQuakeData.value.length
  ],
  (newValues) => {
    const allEmpty = newValues.every((array) => array === 0)

    if (allEmpty) {
      clearInput()
    } else {
      ;({ closePopup, hidePopup } = createPopup(popup.value, 65, isActiveNumber, 'houseall-point'))
    }
  }
)
</script>

<style lang="scss" scoped>
.list-content {
  max-height: 400px;
  overflow: auto;
}
.image-video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  img,
  video {
    max-width: 75%;
    max-height: 75%;
    object-fit: contain;
  }
}
.popup {
  position: fixed;
  display: none; /* 初始隐藏 */
  width: 450px;
  .list {
    font-size: 16px;
    color: #b9eeff;
    line-height: 26px;
    display: flex;
    align-items: center;
    .header {
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      line-height: 40px;
    }
  }
  .title {
    letter-spacing: 1px;
    margin-right: 10px;
  }
  .desc {
    color: #fff;
  }
}
.carousAudio {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>